<%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HXNT IP网络质量及应用监测系统</title>
<meta name="author" content="Simon Shu"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/easyui/themes/myself/easyui.css"/>  
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/easyui/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/images/style.css"/>  
<script type="text/javascript" src="<%=request.getContextPath() %>/easyui/jquery-1.8.0.min.js"></script>  
<script type="text/javascript" src="<%=request.getContextPath() %>/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/images/DrawingManager.js"></script>
</head>
<body>
<div id="content" class="easyui-panel" data-options="fit:true,border:false" 
		style="padding:3px 8px 10px 3px;overflow: hidden;margin:0;"> 
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'center',border:false"
	style="padding:5 5 0 5px;background:#edf7ff"> 
<table 
  	class="easyui-datagrid" 
  	data-options="singleSelect:true,toolbar:'#toolbar',border:true,fit:true,fitColumns:true">
	<thead>
		<tr>
			<th data-options="field:'name',width:240">Case Name</th>
			<th data-options="field:'endpointA',width:200">End Point 1</th>
			<th data-options="field:'endpointB',width:200">End Point 2</th>
			<th data-options="field:'networkprotocol',width:280">Network Protocol</th>
			<th data-options="field:'serviceQuality',width:220">Service Quality</th>
			<th data-options="field:'scriptFilename',width:310">Script Filename</th>
			<th data-options="field:'pairComment',width:200">Pair Comment</th>
		</tr>
	</thead>    
</table>

<div id="toolbar" style="padding:5px;padding-left:10px;background:#EDF7FF">
    <a href="#" class="easyui-linkbutton" title="Add Pair" data-options="iconCls:'icon-add',plain:true" onclick="addPair()"></a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="editSport()"></a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="editSport()"></a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="editSport()"></a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="editSport()"></a>    
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="editSport()"></a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="editSport()"></a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeSport()"></a>
</div> 
</div>
<div data-options="region:'south',border:false" style="padding:0 5 5 5;background:#edf7ff">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'center',border:false">
<div class="easyui-pagination" 
	data-options="
	total:10,
	showRefresh:false,
	showPageList:false,
	displayMsg: '',
	pageSize:8,
	pageNumber:1,
	onSelectPage:function(pageNumber,pageSize) {
		display_page(pageNumber);
	}"
	style="background:#edf7ff;border:1px solid #c3d9e0;border-top:0;">
</div>
</div>
</div>
</div>
</div>
</div>

<div id="dlg" class="easyui-dialog" title="Add Pair Page" 
	data-options="closed:true,buttons:'#buttonbar',inline:true"  
	style="width:340px;height:340px;padding:5px;" >
<form id="form01" method="post" >
<div>Pair Comment: <input type="text" value="" size="30" class="easyui-validatebox" /></div>
<div>
<fieldset>
<legend>Endpoint 1 to Endpoint 2</legend>
<div style="padding:5px;">
<div>Endpoint 1 network address</div>
<div>    
<select class="easyui-combobox" name="address1" style="width:300px">  
  <option value="AL">192.168.69.210</option>  
  <option value="AK">Alaska</option> 
</select>
</div>
<div>Endpoint 2 network address</div>
<div>    
<select class="easyui-combobox" name="address2"  style="width:300px">  
  <option value="AL">198.120.15.15</option>  
  <option value="AK">Alaska</option> 
</select>
</div>
<div>
<div style="width:150px;float:left;">
Network protocol   
<select class="easyui-combobox" name="address1" style="width:147px;">  
  <option value="AL">TCP</option>  
  <option value="AK">UDP</option>
  <option value="AK">RTP</option> 
</select>
</div>
<div style="width:150px;float:right;">
Service quality
<select class="easyui-combobox" name="address1" style="width:147px;">   
  <option value="AL">Alabama</option>  
  <option value="AK">Alaska</option> 
</select>
</div>
</div>
<div style="clear:both;">
<a href="#" class="easyui-linkbutton" onclick="alert('select script');" style="width:133px">Edit This Script</a>
</div>
<div>
<a href="#" class="easyui-linkbutton" onclick="alert('select script');" style="width:133px">Select Script</a>
</div>
</div>
</fieldset>
</div>
</form>
<div id="buttonbar">
<a href="#" onclick="saveSport()" class="easyui-linkbutton">保存</a>
<a href="#" onclick="$('#dlg').dialog('close');" class="easyui-linkbutton">关闭</a>
</div>
</div>

<script type="text/javascript">
function addPair() {
    $('#dlg').dialog('open').dialog('setTitle','Add an Endpoint Pair');  
}
$(function(){
	$("#form01").find("div").css("paddingTop", "5px");
	$("#dlg").parent().find("div.panel-title")
	.css("backgroundColor", "#6AC100")
	.css("lineHeight", "18px")
	.css("height", "18px")
	.css("paddingLeft", "3px");
});
</script>
</body>
</html>